<template>
  <u-popup :show="show" @close="onClose" mode="bottom" round="20">
    <view class="city-picker">
      <view class="picker-header">
        <text class="cancel" @tap="onClose">取消</text>
        <text class="title">选择地区</text>
        <text class="confirm" @tap="onConfirm">确定</text>
      </view>

      <view class="picker-content">
        <!-- 省份列表 -->
        <scroll-view class="picker-column" scroll-y>
          <view 
            class="picker-item" 
            :class="{ active: selectedProvince && selectedProvince.value === item.value }"
            v-for="item in provinces" 
            :key="item.value" 
            @tap="selectProvince(item)"
          >
            {{ item.label }}
          </view>
        </scroll-view>

        <!-- 城市列表 -->
        <scroll-view class="picker-column" scroll-y>
          <view 
            class="picker-item" 
            :class="{ active: selectedCity && selectedCity.value === item.value }"
            v-for="item in cities" 
            :key="item.value"
            @tap="selectCity(item)"
          >
            {{ item.label }}
          </view>
        </scroll-view>

        <!-- 区域列表，根据showArea控制显示 -->
        <scroll-view class="picker-column" scroll-y v-if="showArea">
          <view 
            class="picker-item" 
            :class="{ active: selectedArea && selectedArea.value === item.value }"
            v-for="item in areas" 
            :key="item.value"
            @tap="selectArea(item)"
          >
            {{ item.label }}
          </view>
        </scroll-view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import cityData from './citys.js'

export default {
  name: 'CitySelect',
  props: {
    // 控制弹窗显示
    show: {
      type: Boolean,
      default: false
    },
    // 控制是否显示区域选择
    showArea: {
      type: Boolean,
      default: false
    },
    // 允许传入初始值
    initialProvince: {
      type: [Object, String],
      default: null
    },
    initialCity: {
      type: [Object, String],
      default: null
    },
    initialArea: {
      type: [Object, String],
      default: null
    }
  },
  data() {
    return {
      provinces: cityData,
      selectedProvince: null,
      selectedCity: null,
      selectedArea: null,
      cities: [],
      areas: []
    }
  },
  watch: {
    show(val) {
      if (val) {
        // 弹窗显示时初始化数据
        this.initializeSelections()
      }
    }
  },
  methods: {
    initializeSelections() {
      // 重置选择状态
      this.selectedProvince = null
      this.selectedCity = null
      this.selectedArea = null
      this.cities = []
      this.areas = []
      
      if (this.initialProvince) {
        // 找到对应的省份对象
        let province
        
        if (typeof this.initialProvince === 'string') {
          province = this.provinces.find(p => p.value === this.initialProvince || p.label === this.initialProvince)
        } else {
          province = this.initialProvince
        }
        
        if (province) {
          this.selectProvince(province, true)
          
          if (this.initialCity) {
            // 找到对应的城市对象
            let city
            
            if (typeof this.initialCity === 'string') {
              city = this.cities.find(c => c.value === this.initialCity || c.label === this.initialCity)
            } else {
              city = this.initialCity
            }
            
            if (city) {
              this.selectCity(city, true)
              
              if (this.showArea && this.initialArea) {
                // 找到对应的区域对象
                let area
                
                if (typeof this.initialArea === 'string') {
                  area = this.areas.find(a => a.value === this.initialArea || a.label === this.initialArea)
                } else {
                  area = this.initialArea
                }
                
                if (area) {
                  this.selectArea(area, true)
                }
              }
            }
          }
        }
      }
    },
    
    // 选择省份
    selectProvince(province, isInit = false) {
      this.selectedProvince = province
      this.cities = province.children || []
      
      // 重置城市和区域选择（初始化时不重置）
      if (!isInit) {
        this.selectedCity = null
        this.selectedArea = null
        this.areas = []
      }
    },
    
    // 选择城市
    selectCity(city, isInit = false) {
      this.selectedCity = city
      this.areas = city.children || []
      
      // 重置区域选择（初始化时不重置）
      if (!isInit) {
        this.selectedArea = null
      }
    },
    
    // 选择区域
    selectArea(area) {
      this.selectedArea = area
    },
    
    // 确认选择
    onConfirm() {
      if (!this.selectedProvince) {
        uni.$u.toast('请选择省份')
        return
      }
      
      if (!this.selectedCity) {
        uni.$u.toast('请选择城市')
        return
      }
      
      if (this.showArea && !this.selectedArea) {
        uni.$u.toast('请选择区域')
        return
      }
      
      // 处理返回数据
      const result = {
        province: this.selectedProvince,
        city: this.selectedCity,
        area: this.showArea ? this.selectedArea : null
      }
      
      // 发送事件
      this.$emit('confirm', result)
      this.onClose()
    },
    
    // 关闭弹窗
    onClose() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.city-picker {
  background: #FFFFFF;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #EEEEEE;

    .cancel {
      color: #666666;
      font-size: 28rpx;
    }

    .title {
      color: #333333;
      font-size: 32rpx;
      font-weight: bold;
    }

    .confirm {
      color: #1C6EFB;
      font-size: 28rpx;
    }
  }

  .picker-content {
    display: flex;
    height: 600rpx;

    .picker-column {
      flex: 1;
      height: 100%;
      border-right: 1rpx solid #EEEEEE;

      &:last-child {
        border-right: none;
      }

      .picker-item {
        padding: 25rpx 20rpx;
        font-size: 28rpx;
        color: #333333;

        &.active {
          color: #1C6EFB;
          background: #F5F5F5;
        }
      }
    }
  }
}
</style>
